<template>
  <div class="gasolineContent">
    <el-card>
      <el-page-header @back="router.back()">
        <template #content>
          <span class="text-large font-600 mr-3" style="color: #fff;"> {{ route.query.title }} </span>
        </template>
      </el-page-header>
    </el-card>
    <div class="gasolineMain">
      <el-card style="background: black;">
        <div class="content">
          <el-form ref="formRef" :rules="rules" label-width="120px">
            <el-form-item label="请选择名称" prop="selectValue" label-width="100px">
              <el-select v-model="selectValue" placeholder="请选择 省份/直辖市/自治区 查询" @change="changeCity" :no-data-text="'无数据'" style="width: 300px;height: 40px;margin-right: 20px;">
                <el-option
                  v-for="(item, index) in province"
                  :key="index"
                  :label="(item.city as string)"
                  :value="(item.value as string)"
                  style="padding-left: 10px;padding-top: 8px;"
                >
                </el-option>
              </el-select>
              <el-button  style="width: 100px;height: 40px;" type="warning" @click="gasolineSelect">查询</el-button>
              <el-button  style="width: 100px;height: 40px;" type="danger" @click="reset">重置</el-button>
            </el-form-item>
          </el-form>
          <el-table
            :data="tableData"
            id="table"
            row-key="id"
            style="width: 100%;margin-top: 50px;"
          >
            <el-table-column type="index" label="序号" align="center" width="60">
            </el-table-column>
            <el-table-column label="0号柴油" align="center" prop="p0">
            </el-table-column>
            <el-table-column label="92号汽油" align="center" prop="p92">
              <template #default="{ row }">
                {{ row.p92 }}
              </template>
            </el-table-column>
            <el-table-column label="95号汽油" align="center" prop="p95">
            </el-table-column>
            <el-table-column label="98号汽油" align="center" prop="p98">
            </el-table-column>
            <el-table-column label="查询时间" align="center" prop="ct">
              <template #default="{ row }">
                {{ row.ct }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import type { FormRules, FormInstance } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { provinceList } from '@/utils/plugins'
import request from '@/utils/request'

const route = useRoute()
const router = useRouter()

const formRef = ref<FormInstance>()

const gasoline = ref<any>('')
const selectValue = ref('')
const tableData = ref<any[]>([])
const province = provinceList()

const rules = ref<FormRules>({})

const reqGasolineInfo = (data: any) => request.post<any, any>(`https://route.showapi.com/138-46?showapi_appid=1505398&showapi_sign=38a5f6fb1abe4355bc2f0d5435372138&data=0424&prov=${selectValue.value}`, data)
const gasolineSelect = () => {
  if (selectValue.value == '') {
    ElMessage({
      type: 'warning',
      message: '请选择 省份/直辖市/自治区 查询'
    })
    return
  }
  reqGasolineInfo({
    // showapi_appid: '1505398', //这里需要改成自己的appid
    // showapi_sign: '38a5f6fb1abe4355bc2f0d5435372138',  //这里需要改成自己的应用的密钥secret
    prov: selectValue.value
  }).then(res => {
    console.log('res', res)
    if (res.showapi_res_body.ret_code == 0) {
      tableData.value = res.showapi_res_body.list
    } else {
      ElMessage({
        type: 'error',
        message: res.showapi_res_error || res.showapi_res_body.remark
      })
    }
  })
}

const changeCity = (value: string) => {
  selectValue.value = value
}

const reset = () => {
  selectValue.value = '' 
  tableData.value = []
}

onMounted(() => {

})

</script>

<style lang="scss" scoped>
.gasolineContent {
  width: 100%;

  .el-card {
    border-radius: $base-card-border-radius;
  }

  .gasolineMain {
    margin-top: 20px;
    padding: 20px;

    .el-card {
      border-radius: 16px;
      box-shadow: 0px 4px 18px 0px rgba(248,216,82, 0.9);

      .content {
        :deep(.el-input__wrapper) {
          width: 300px;
          height: 40px;
        }


      }
    }
  }

}
</style>